<template>
	<view class="liveVideo hwq-content">
		<!-- 现场视频 -->
		<navBar title="现场视频"></navBar>
		<view class="bgc"></view>
			<view class="content">
				<view class="video" v-if="deviceUrl">
					<video :src="deviceUrl" :controls="true" :autoplay="false" class="image" :show-progress="false" :show-bottom-progress="false"></video>
				</view>
				<view class="video" v-else>
					<!-- <video src="" :controls="true" :autoplay="false" class="image"></video> -->
					<image src="../static/shiping.png" class="image" width="100%" height="100%"></image>
				</view>
				<view class="bottom">
					<view class="list">
						<view class="list-item" v-for="(item, index) in videoTypeList" :key="item.id" :class="{ active: videoSelect === item.id }" @click="clickItem(item.id)">{{ item.name }}</view>
					</view>
					<view class="name">
						<view class="name-item" v-for="(item, index) in videoList" :key="item.id" :class="{active: index === currentIndex}" @click="getClickItem(item, index)">{{ item.deviceCode }}</view>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	import {
		getDeviceType
	} from "@/api/emergency/emergencyDispatch.js"
	import {
		getQueryCameraData
	} from "@/api/bigPage/emergency.js"
	import { handleVideoUrlErrorResult } from "@/utils/communicate/business.js";
	
	export default {
		name: "liveVideo",
		data() {
			return {
				videoTypeList: [],
				videoSelect: undefined,
				videoList: [],
				activeVideoItem: undefined,
				deviceUrl: '',
				currentIndex:0
			}
		},
		onLoad(option) {
			this.eventId = option.id
			this.getDeviceType()
		},
		methods: {
			clickItem(id) {
				this.videoSelect = id
				this.deviceUrl = ''
				this.getVideosList()
			},
			// 设备类型数据
			async getDeviceType() {
				let _data = {
					name: "",
					ex1: 'equipment',
					parentId: 60,
				}
				let device = await getDeviceType(_data)
				this.videoTypeList = device.result || []
				if (this.videoTypeList.length !== 0) {
					this.videoSelect = this.videoTypeList[0].id
					this.getVideosList()
				}
			},
			// 获取视频数据
			getVideosList() {
				getQueryCameraData({
					eventId: this.eventId || "",
					subDeviceTypeId: this.videoSelect
				}).then(async res => {
					if (res.success && res.result) {
						this.videoList = res.result || []
						if(this.videoList.length>0){
							this.activeVideoItem=this.videoList[0].deviceId
							this.getClickItem(null,0)
							return
						}
					} else {
						this.videoList = []
					}
					this.activeVideoItem=undefined
				})
			},
			
			async getClickItem(item, index){
				this.deviceUrl = null;
				this.currentIndex = index
				console.log(item, this.videoList[index], '86行')
				const data = await handleVideoUrlErrorResult(this.videoList[index], "deviceUrl");
				this.$nextTick(() => {
					this.deviceUrl = data.deviceUrl;
					
				})
				console.log(this.deviceUrl,!this.deviceUrl, '89hang====');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.liveVideo {
		padding-top: 20rpx !important;
		width: 100%;
		height: calc(100vh - 20rpx);
		.content {
			// background-color: #F5F7FA;
			// padding-top: 30rpx;
			/* #ifdef MP-WEIXIN */
				margin-top: 200rpx;
			/* #endif */
		}
		.bgc{
			height: 30rpx;
			background-color: #F5F7FA;
		}

		// .header {
		// 	background-color: #FFFFFF;
		// 	padding: 30rpx 40rpx;
		// 	padding-right: 20rpx;
		// 	display: flex;
		// 	margin-bottom: 30rpx;
		// 	height: 150rpx;

		// 	.header-item {
		// 		position: relative;

		// 		.name {
		// 			position: absolute;
		// 			top: 50%;
		// 			left: 50%;
		// 			transform: translate(-50%, -50%);
		// 			text-align: center;
		// 			font-size: 32rpx;
		// 			font-family: PingFang SC-Bold, PingFang SC;
		// 			font-weight: bold;
		// 			color: #FFFFFF;
		// 			line-height: 38rpx;
		// 			text-shadow: 0px 8rpx 8rpx #FF5655;
		// 			width: max-content;
		// 		}
		// 	}

		// 	.img {
		// 		height: 150rpx;
		// 		width: 210rpx;
		// 		margin-right: 20rpx;
		// 	}
		// }

		// .center2 {
		// 	padding: 0rpx 30rpx;
		// 	background-color: #FFFFFF;

		// 	.nav {
		// 		padding: 0rpx 20rpx;
		// 		line-height: 100rpx;
		// 		height: 100rpx;
		// 		font-size: 32rpx;
		// 		font-weight: bold;
		// 		color: #445469;
		// 		display: flex;
		// 		justify-content: space-between;
		// 		align-items: center;
		// 	}

		// 	.image {
		// 		width: 100%;
		// 		height: 426rpx;
		// 	}

		// 	.con {
		// 		margin-top: 40rpx;

		// 		.item {
		// 			display: flex;
		// 			justify-content: space-between;
		// 			height: 250rpx;
		// 			margin-bottom: 10rpx;

		// 			.tag {
		// 				text-align: center;
		// 				font-size: 24rpx;
		// 				font-weight: bold;
		// 				color: #445469;

		// 				.text {
		// 					line-height: 50rpx;
		// 					height: 66rpx;
		// 				}
		// 			}

		// 			.tagImg {
		// 				width: 332rpx;
		// 				height: 184rpx;
		// 			}
		// 		}
		// 	}
		// }
		
		
		.video{
			width: 100%;
			height: 520rpx;
			margin-bottom: 40rpx;
			.image{
				width: 100%;
				height: 520rpx;
			}
		}
		.bottom{
			padding: 0rpx 30rpx ;
			display: flex;
			height: 590rpx;
			.list{
				width: 280rpx;
				font-size: 32rpx;
				height: 590rpx;
				overflow: auto;
				background-color: #f5f7fa;
				.list-item{
					background-color: #f5f7fa;
					text-align: center;
					height: 80rpx;
					line-height: 80rpx;
					font-family: Noto Sans Thai UI-Medium, Noto Sans Thai UI;
					color: #6A819E;
					cursor: pointer;
					font-weight: 600;
					white-space: nowrap;
				}
				.active{
					color: #f59d38;
					font-weight: 600;
				}
			}
			.name{
				flex: 1;
				background-color: #fff;
				height: 590rpx;
				overflow: auto;
				
				.name-item{
					line-height: 80rpx;
					padding-left: 40rpx;
					font-size: 32rpx;
					border: 1px #e4e4e4 solid;
					cursor: pointer;
				}
				.active{
					color: #f59d38;
					font-weight: 600;
				}
			}
		}
	}
	::v-deep .navBar{
		margin: 0rpx;
		padding-top: 30rpx;
	}
	::v-deep .navBar .left{
		top: 44rpx;
	}
</style>
<style>
	page{
		height: 100%;
		width: 100%;
	}
	body{
		width: 100%;
		height: 100%;
	}
	.hwq-content{
		padding: 0;
	}
</style>
